<template>
    <el-button @click="Del">删除</el-button>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="客户名称">
      <el-input v-model="form.ClientName"  style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="领用人">
      <el-input v-model="form.CRecipients"  style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="领用时间">
        <el-date-picker
        v-model="form.STime"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:m:s a"
      />
      <el-date-picker
        v-model="form.ETime"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:m:s a"
      />
    </el-form-item>
    
    <el-form-item label="领用状态">
      <el-select v-model="form.CPickingStatus" placeholder="请选择"  style="width: 240px">
        <el-option label="待审批" :value="2" />
        <el-option label="未领用" :value="1" />
        <el-option label="已领用" :value="3" />
      </el-select>
    </el-form-item> 
    <el-form-item label="申请人">
      <el-input v-model="form.CApplicant" />
    </el-form-item>
<el-form-item>
    <el-button type="primary" @click='GetShow'>查询</el-button>
    </el-form-item> 


</el-form> 
<span style="font-size: 24px; font-weight:250; margin-bottom: 10px; display: flex; justify-content: center; align-items: center">全部客户列表</span>
<el-row>
<el-col :span="4">
        <el-tree
    style="max-width: 600px"
    :data="Product"
    :props="defaultProps"
    default-expand-all
    @node-click="handleNodeClick"
  />


    </el-col>
    <el-col :span="20">
    <el-table :data="Show" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column  label="序号" type="index" width="80" />
    <el-table-column label="客户编号" width="100"  >
      <template #default="scope">
        <a type="primary" @click="Upd(scope.row.clientId)">{{scope.row.clientNumber  }}</a>
      </template>
      
    </el-table-column>
    <el-table-column prop="clientName" label="客户名称"  width="100" />
    <el-table-column prop="provinceName" label="所在省份"  width="100" />
    <el-table-column prop="cityName" label="所在市区"  width="100" />
    <el-table-column prop="cPrimaryContact" label="联系人姓名"  width="100" />
    <el-table-column prop="cPickingStatus" label="领用状态"  width="100" >
        <template #default="scope">
          <span v-if="scope.row.cPickingStatus === 1">未领用</span>
          <span v-if="scope.row.cPickingStatus === 2">待审批</span>
          <span v-if="scope.row.cPickingStatus === 3">已领用</span>
        </template>
    </el-table-column>
    <el-table-column prop="cApplicant" label="申请人员"  width="100" />
    <el-table-column prop="cRecipients" label="领用人员"  width="100" />
    <el-table-column prop="cPickTime" label="领用时间"  width="100" />
    <el-table-column  label="操作"  width="500">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.cPickingStatus === 1" @click="handleShen(scope.row)">申请</el-button>
          <el-button type="danger" v-if="scope.row.cPickingStatus === 2" @click="handleTong(scope.row)">同意</el-button>
          <el-button type="success" v-if="scope.row.cPickingStatus === 2" @click="handleunTong(scope.row)">不同意</el-button>
          <el-button type="danger"    @click="handleZhi(scope.row)">指派</el-button>
          <el-button type="success" @click="handleGong(scope.row)">公用</el-button>
        </template>
    </el-table-column>
  </el-table>


    </el-col>
</el-row>


<el-dialog v-model="dialogTableVisible"  width="800">
  <el-button @click="dialogTableVisible = false">确定</el-button>
  <el-row>
        <el-col :span="3">
            <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" @node-click="handleNodeClick1" />
        </el-col>
        <el-col :span="21">
            <el-table :data="manpowerList" style="width: 100%"  highlight-current-row  @current-change="handleSelectionChange1" >
                
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="mNumber" label="档案编号" align="center" />
                <el-table-column prop="mName" label="真实姓名" align="center" />
                <el-table-column prop="users" label="登录账号" align="center" />
                <el-table-column prop="mSex" label="性别" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mSex == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="mPhone" label="联系电话" align="center" />
                <el-table-column prop="mBirthDay" label="出生日期" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mBirthDay.substring(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sectorName" label="所在部门" align="center" />
                <el-table-column prop="postName" label="所在岗位" align="center" />
            </el-table>
        </el-col>
    </el-row>
</el-dialog>
</template>
<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute} from 'vue-router'
import http from '../../../http.js'
const router = useRouter()
const route = useRoute()
const form = reactive({
    ClientName:'',
    CRecipients:'',
    STime:'',
    ETime:'',
    CPickingStatus:'',
    CApplicant:'',
    CIndustry:'',
    pageIndex:1,
    pageSize:5,
    totalCount:0,
    pageCount:0,
    SectorId:0
})


onMounted(()=>{
    ProductType();
    GetShow();
    GetSectorList();
    GetManpowerList();
})
var Product=ref([]);
const ProductType=()=>{
    axios.get(http.zblnb + '/vendor/api/Client/ProductTypeSelect').then(res=>{
        Product.value=res.data.data
        console.log(res.data.data)
    })
}
var Show=ref([]);
const GetShow=()=>{
    axios.get(http.zblnb + '/vendor/api/Client/ClientAllShow',{
        params:{
    ClientName:form.ClientName,
    CRecipients:form.CRecipients,
    STime:  form.STime,
    ETime: form.ETime,
    CPickingStatus:form.CPickingStatus,
    CApplicant: form.CApplicant,
    CIndustry: form.CIndustry,
    pageIndex:1,
    pageSize:15,
        }
    }).then(res=>{
         Show.value=res.data.data.list
        console.log(res.data.data)
         form.totalCount=res.data.data.lcount
         form.pageCount=res.data.data.pcount
    })
}
const defaultProps = {
  children: 'children',
  label: 'label',
}
interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data.value)
  form.CIndustry=data.value
  GetShow();
}




//申请
const handleShen=(row:any)=>{

var id=row.clientId
console.log(id)
axios.get(http.zblnb + '/vendor/api/Client/ClientStateShow',{
    params:{
        ClientId:id,
        CPickingStatus:2
    }
}).then(res=>{
    console.log(res.data.data)
    GetShow();
})
}
//同意
const handleTong=(row:any)=>{
  var id=row.clientId
  console.log(id)
  axios.get(http.zblnb + '/vendor/api/Client/ClientStateShow',{
    params:{
        ClientId:id,
        CPickingStatus:3
    }
}).then(res=>{
    console.log(res.data.data)
    GetShow();
})
  
}

//不同意
const handleunTong=(row:any)=>{
  var id=row.clientId
  console.log(id)
  axios.get(http.zblnb + '/vendor/api/Client/ClientStateShow',{
    params:{
        ClientId:id,
        CPickingStatus:1
    }
}).then(res=>{
    console.log(res.data.data)
    GetShow();
})
  
}

//公用
const handleGong=(row:any)=>{
  var id=row.clientId
  console.log(id)
  axios.get(http.zblnb + '/vendor/api/Client/ClientStateShow',{
    params:{
        ClientId:id,
        CPickingStatus:5
    }
}).then(res=>{
    console.log(res.data.data)
    GetShow();
})
}



//人员 弹窗

const dialogTableVisible = ref(false);
//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
        })
}
//树形
const handleNodeClick1 = (data: Tree) => {
    console.log(data)
     form.SectorId = data.value

    GetManpowerList();
}






const currentRow =ref('')
//单选
const handleSelectionChange1 = (val: any | undefined) => {
  currentRow.value= val.mName
  console.log(currentRow.value)
 hh(currentRow.value);
}
var id=0;
const handleZhi=(row:any)=>{
  dialogTableVisible.value = true; // Show the dialog  
   id=row.clientId
}
const hh=(d:string)=>{
  console.log(id)
  console.log(d)
  axios.get(http.zblnb + '/vendor/api/Client/ClientStateShow',{
    params:{
        ClientId:id,
        CPickingStatus:4,
        CRecipient:d

    }
}).then(res=>{
    console.log(res.data.data)
    GetShow();
})
}
//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex:1,
            Psize: 5,
            SectorId: form.SectorId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
          
        })
}

const Dels = reactive({
    allocateId:[],
    delName:''

})
interface Vendor {  
    vendorId: number; // 或者 string  
}  
//const multipleSelection = ref([])
const handleSelectionChange = (val: Vendor[]) => {
 // multipleSelection.value = val
 console.log(val)
  Dels.allocateId = []; // 如果希望每次重置数组，请取消注释  
    val.forEach((item) => {  
       
        if (!Dels.allocateId.includes(item.clientId)) {  
          Dels.allocateId.push(item.clientId);  
        }  
    });  
    console.log(Dels.allocateId);  
}

//删除
const Del=()=>{
  axios.post(http.zblnb + '/vendor/api/Client/ClientDelete',{
    clientId:Dels.allocateId,
    delName:Dels.delName
    }).then(res=>{
        if(res.data.code==200){
            ElMessage({
                message: '删除成功',
                type: 'success',
                
            })
            GetShow()
        }
    })
}

//修改
const Upd=(id:number)=>{
   console.log(id)
   router.push('/ClientUpdate?id='+id)
}

</script>